<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>BR2P | Bem vindos</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- Start Top Bar -->
        <div class="top-bar">
            <div class="top-bar-left">
                <ul class="menu">
                    <li class="menu-text">BR2P</li>
                    <li>
                        <a href="#" class="button clear">Tutoriais</a>
                    </li>
                    <li>
                        <a href="#" class="button clear">Contatos</a>
                    </li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu">
                    <li>
                        <a href="#" class="button clear">Associados</a>
                    </li>
                    <li>
                        <a href="#" class="button clear">Termos</a>
                    </li>
                    <li>
                        <a href="#" class="button clear">Livro de endereços</a>
                    </li>
                    <li>
                        <a href="#" class="button clear">Contatos</a>
                    </li>
                    <li>
                        <a href="#" class="button clear">Download</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- End Top Bar -->
        <div class="callout large">
            <div class="text-center">
                <h1 class="font-lead">Login</h1>
            </div>
        </div>
        <div class="grid-container">
            <div class="grid-x">
                <div class="large-12 columns">
                    <div class="inner-wrap">
                        <div class="wrap-fluid">
                            <br>
                            <br>
                            <!-- Container Begin -->
                            <div class="large-5 small-centered columns">
                                <div class="profile"> 
                                    <img alt="" class="" src="./img/yeti.svg">
                                    <h3>Login</h3> 
                                </div>
                                <div class="box bg-white">
                                    <!-- Profile -->
                                    <!-- End of Profile -->
                                    <!-- /.box-header -->
                                    <div class="box-body " style="display: block;">
                                        <div class="row">
                                            <div class="large-12 columns">
                                                <div class="row">
                                                    <div class="">
                                                        <p class="welcome">Log in with you email account</p>
                                                        <form>
                                                            <div class="row column log-in-form">
                                                                <label>Email
                                                                    <input type="text" placeholder="somebody@example.com"> 
                                                                </label>
                                                                <label>Password
                                                                    <input type="text" placeholder="Password"> 
                                                                </label>
                                                                <input id="keep-login" type="checkbox" class="button hollow">
                                                                <label for="show-password">Manter logado</label>
                                                                <p><a type="submit" class="button expanded">Log In</a></p>
                                                                <p class="text-center"><a href="#">Esqueceu sua senha?</a></p>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="large-5 columns no-pad">
</div>
                                                    <div class="large-2 columns"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end .timeline -->
                                </div>
                                <!-- box -->
                            </div>
                        </div>
                        <!-- End of Container Begin -->
                    </div>
                </div>
            </div>
            <div>
                <ul class="menu">
                    <li>
                        <a href="#">One</a>
                    </li>
                    <li>
                        <a href="#">Two</a>
                    </li>
                    <li>
                        <a href="#">Three</a>
                    </li>
                    <li>
                        <a href="#">Four</a>
                    </li>
                </ul>
            </div>
        </div>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.js"></script>
        <script>
      $(document).foundation();
    </script>
    </body>
</html>
